<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">

<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title> 用户信息 </title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>

<body>
<div id="app">

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- 导航栏商标 -->
        <div>
            <a class="navbar-brand" href="index.html">个人博客</a>
        </div>
    </div>
    <!--登录/个人中心-->
    <div class="navbar-collapse">
        <ul class="nav navbar-nav">
            <!-- 如果用户已经登录，则显示用户名下拉框 -->
            <li class="nav-item dropdown" v-if="is_login">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">admin</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu">
                    <a class="dropdown-item" href="write_blog.html">写文章</a>
                    <a class="dropdown-item" href='./center.html'>个人信息</a>
                    <a class="dropdown-item" href='#'>退出登录</a>
                </div>
            </li>
            <!-- 如果用户未登录，则显示登录按钮 -->
            <li class="nav-item" v-else>
                <a class="nav-link" href="login.html">登录</a>
            </li>

        </ul>
    </div>
</nav>

<!--content-->
<div class="container" style="margin-bottom: 20px">
        <div class="row">
            <div class="col-12">
                <br>
                <form method="post" enctype="multipart/form-data">
                    <!-- username -->
                <div class="form-group col-md-4">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" value="admin" >
                </div>
                <!--<br><h5 class="col-md-4">暂无头像</h5><br>-->
                <br> <div class="col-md-4">头像</div>
                <img src="img/mei.png" style="max-width: 20%;" class="col-md-4"><br>
                    <!-- avatar -->
                    <div class="form-group col-md-4">
                        <label for="avatar">上传头像</label>
                        <input type="file" class="form-control-file" name="avatar" id="avatar">
                    </div>

                    <!-- phone -->
                    <div class="form-group col-md-4">
                        <label for="phone">电话</label>
                        <input type="text" class="form-control" disabled="disabled" id="phone" name="phone" value="">
                    </div>
                    <!-- desc -->
                    <div class="form-group col-md-4">
                        <label for="desc">简介</label>
                        <!-- 文本区域 -->
                        <textarea type="text" class="form-control" id="desc" name="desc" rows="12" ></textarea>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary" style="margin-left: 12px" >修改</button>
                </form>
            </div>
        </div>
    </div>


<!-- Footer -->
<footer class="py-3 bg-dark" id="footer">
    <div class="container">
        <h5 class="m-0 text-center text-white">Copyright @ xiao</h5>
    </div>
</footer>
</div>
<!-- 引入js -->
<script type="text/javascript" src="js/host.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/center.js"></script>
</body>

</html>